<template>
  <section class="msite">
    <!--首页头部-->
    <!-- <header class="header">
        <span class="header_search">
          <i class="iconfont iconsousuo"></i>
        </span>
      <span class="header_title">
          <span class="header_title_text ellipsis">昌平区北七家宏福科技园(337省道北)</span>
        </span>
      <span class="header_login">
          <span class="header_login_text">登录|注册</span>
        </span>
    </header> -->
    <WshopHeader :title="address.name ? address.name : '正在定位...'">
      <!-- <span class="header_search">
        <i class="iconfont iconsousuo"></i>
      </span> -->
      <template v-slot:left>
        <span class="header_search">
          <i class="iconfont iconsousuo"></i>
        </span>
      </template>

      <template v-slot:right>
        <span class="header_login">
          <span class="header_login_text">登录|注册</span>
        </span>
      </template>

      <!-- <span class="header_login">
        <span class="header_login_text">登录|注册</span>
      </span> -->
    </WshopHeader>

    <!--首页导航-->
    <nav class="msite_nav">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(category, index) in newCategories" :key="index">
            <div class="link_to_food" v-for="(categoryItem, index) in category" :key="index">
              <div class="food_container">
                <img :src="`https://fuss10.elemecdn.com${categoryItem.image_url}`">
              </div>
              <span>{{categoryItem.title}}</span>
            </div>
            <!-- <div class="link_to_food">
              <div class="food_container">
                <img src="../../common/images/nav/2.jpg">
              </div>
              <span>简餐</span>
            </div>
            <div class="link_to_food">
              <div class="food_container">
                <img src="../../common/images/nav/3.jpg">
              </div>
              <span>医疗</span>
            </div>
            <div class="link_to_food">
              <div class="food_container">
                <img src="../../common/images/nav/4.jpg">
              </div>
              <span>商超便利</span>
            </div>
            <div class="link_to_food">
              <div class="food_container">
                <img src="../../common/images/nav/5.jpg">
              </div>
              <span>新店特惠</span>
            </div>
            <div class="link_to_food">
              <div class="food_container">
                <img src="../../common/images/nav/6.jpg">
              </div>
              <span>准时达</span>
            </div>
            <div class="link_to_food">
              <div class="food_container">
                <img src="../../common/images/nav/7.jpg">
              </div>
              <span>预订早餐</span>
            </div>
            <div class="link_to_food">
              <div class="food_container">
                <img src="../../common/images/nav/8.jpg">
              </div>
              <span>土豪推荐</span>
            </div> -->
          </div>
          <!-- <div class="swiper-slide">
            <div class="link_to_food">
              <div class="food_container">
                <img src="../../common/images/nav/9.jpg">
              </div>
              <span>甜品饮品</span>
            </div>
            <div class="link_to_food">
              <div class="food_container">
                <img src="../../common/images/nav/10.jpg">
              </div>
              <span>商超便利</span>
            </div>
            <div class="link_to_food">
              <div class="food_container">
                <img src="../../common/images/nav/11.jpg">
              </div>
              <span>美食</span>
            </div>
            <div class="link_to_food">
              <div class="food_container">
                <img src="../../common/images/nav/12.jpg">
              </div>
              <span>简餐</span>
            </div>
            <div class="link_to_food">
              <div class="food_container">
                <img src="../../common/images/nav/13.jpg">
              </div>
              <span>新店特惠</span>
            </div>
            <div class="link_to_food">
              <div class="food_container">
                <img src="../../common/images/nav/14.jpg">
              </div>
              <span>准时达</span>
            </div>
            <div class="link_to_food">
              <div class="food_container">
                <img src="../../common/images/nav/1.jpg">
              </div>
              <span>预订早餐</span>
            </div>
            <div class="link_to_food">
              <div class="food_container">
                <img src="../../common/images/nav/2.jpg">
              </div>
              <span>土豪推荐</span>
            </div>
          </div> -->
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </nav>

    <!--首页附近商家-->
    <ShopInformation/>
    
  </section>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import {mapState} from 'vuex'
import {getAddress} from '../../network'
import _ from 'lodash'

import ShopInformation from '../../components/ShopInformation/ShopInformation'
export default {
  components: {
    ShopInformation
  },
  mounted() {
    // let result = await getAddress(40.10038, 116.36867)
    // console.log(result);

    // 分发获取地理位置的函数
    this.$store.dispatch('getAddressAction')

    // 分发获取商品分类的函数
    this.$store.dispatch('getCategoriesAction', () => {
      // 解决是wiper滑动方式二
      this.$nextTick(() => {
        // 轮播图
        new Swiper('.swiper-container', {
          pagination: {
            el: '.swiper-pagination',
          },
          loop: true
        })
      })
    })

  },
  computed: {
    // 写法一
    // ...mapState(['address'])

    // 写法二
    ...mapState({
      address: state => state.address,
      categories: state => state.categories
    }),
    newCategories() {
      return _.chunk(this.categories, 8)
    }
  },
  watch: {
    // 解决是wiper滑动方式一
    // categories() {
    //   this.$nextTick(() => {
    //     // 轮播图
    //     new Swiper('.swiper-container', {
    //       pagination: {
    //         el: '.swiper-pagination',
    //       },
    //       loop: true
    //     })
    //   })
    // }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../common/stylus/mixins.styl'
.msite  //首页
  width 100%
  .msite_nav
    bottom-border-1px(#e4e4e4)
    margin-top 45px
    height 200px
    background #fff
    .swiper-container
      width 100%
      height 100%
      .swiper-wrapper
        width 100%
        height 100%
        .swiper-slide
          display flex
          flex-wrap wrap
          .link_to_food
            width 25%
            .food_container
              display block
              width 100%
              text-align center
              padding-bottom 10px
              font-size 0
              img
                display inline-block
                width 50px
                height 50px
            span
              display block
              width 100%
              text-align center
              font-size 13px
              color #666
      /* 深度选择器 */
      /deep/ .swiper-pagination
        >span.swiper-pagination-bullet-active
          background #02a774
        
</style>